<script setup>
import { data } from 'autoprefixer';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { ref,onMounted,watch } from 'vue';

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart()
})

const renderChart = () =>{
  const option = {
    series: [
      {
        type: 'wordCloud', // 文档云图
        sizeRange: [12, 60], // 字体大小范围
        rotationRange: [0, 0], // 字体旋转角度范围
        gridSize: 8, // 字体间距
        layoutAnimation:true,
        textStyle: {
          color: function (){
              return 'rgb(' + [
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255),
                Math.round(Math.random() * 255)
              ].join(',') + ')'
          }
        },
        emphasis:{
          fontWeight: 'bold',
          color: '#000'
        },
        data: props.data.datas
      }
    ]
  }

  myChart.setOption(option);
}

const props = defineProps({
  data:{
    type: Object,
    required: true
  }
})

watch(()=>props.data,()=>{
  renderChart()
})



</script>

<template>
  <div>
    <div>【关系词条】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>

</template>

<style scoped>

</style>